/*
 * @Author: 肖思汗
 * @Date: 2020-02-12 16:15:56
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2020-02-18 18:24:19
 */

// 创建 渲染器 场景 相机 灯光 控制器

import * as THREE from 'three';

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

import elementResizeEvent from 'element-resize-event';

import threeMouse from './threeMouse.js';

export default function initRender() { // 

    this.camera = new THREE.PerspectiveCamera(50, 1, 1, 2000); // 创建透视相机

    this.camera.position.set(0.04, 3.14, 4.6);

    this.renderer = new THREE.WebGLRenderer({ // 创建渲染器
        alpha: true, // 透明背景
        antialias: true, // 阴影抗锯齿
        precision: 'highp', // precision:highp/mediump/lowp着色精度选择
        maxLights: 999// maxLights:最大灯光数
    });

    this.renderer.localClippingEnabled = false;// 禁用全局裁剪功能

    this.renderer.shadowMap.enabled = false; // 关闭光照阴影计算

    this.rootDom.appendChild(this.renderer.domElement); // 把渲染器dom放到根节点上

    this.scene = new THREE.Scene(); // 场景

    // if (__DEV__) { // 开发模式
    //     this.scene.add(new THREE.AxesHelper(100)); // 直角坐标系

    //     let gridHelper = new THREE.GridHelper(200, 100, 0x404040, 0x404040);// 网格参考线

    //     gridHelper.position.set(0, -0.01, 0);

    //     this.scene.add(gridHelper); // 网格参考线
    // }

    window.scene = this.scene.add(new THREE.HemisphereLight('#fff', '#000', 0.3)); // 半球光

    let directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 平行光

    directionalLight.position.set(-1, 2, 1); // 平行光的位置

    this.scene.add(directionalLight);

    this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement); // 原点控制器

    this.orbitControls.enabled = false;

    threeMouse.call(this);

    this.isUnMoment = false;// 组件是否卸载了

    // 自动调节尺寸
    this.onresize = () => {
        let rect = this.rootDom.getBoundingClientRect(); // 获取div 的尺寸

        let width = Math.ceil(rect.width);
        let height = Math.ceil(rect.height);

        this.camera.aspect = width / height; // 修改相机的 长宽比
        this.camera.updateProjectionMatrix();// 更新投影矩阵
        this.renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比率
        this.renderer.setSize(width, height); // 设置渲染器的尺寸
    };

    this.onresize();

    elementResizeEvent(this.rootDom, this.onresize); // 当跟节点div 尺寸改变时 调整渲染器尺寸

    this.timeStamp = performance.now(); // 当前时间搓

    let render = () => { // 渲染方法

        if (this.isUnMoment) { return; }// 如果组件卸载了  就不渲染了

        // 鼠标事件 来自 threeMouse.js
        this.isPickup && this.pickup();

        this.renderer.render(this.scene, this.camera); // 渲染场景

        setTimeout(() => {
            this.timeStamp = performance.now();
            requestAnimationFrame(render);
        }, Math.max(0, 1000 / 20 - performance.now() + this.timeStamp));
        // 帧频率限制在最大20帧  在足够流畅的前提下  尽可能的减少运算
    };

    render(); // 启动递归渲染

} // initRender